import React from 'react'
import Swiper from '../home/swiper/swiper'
import './category.scss'

export default class Category extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            categoryList: []
        }
    }
    componentDidMount() {
        var id = window.location.hash.split('#/category/')[1]
        this.$axios.get(`https://apipc-xiaotuxian-front.itheima.net/category?id=${id}`).then(res => {
            if (res.data.msg == '操作成功') {
                console.log(res.data.result);
                this.setState({
                    categoryList: res.data.result
                })
            }
        })
    }
    render() {
        return (
            <div>
                <div className="container">
                    <Swiper></Swiper>
                </div>
                {/* <div id="category">
                    <div className="container">
                        <div className="category_list">
                            <h3>全部分类</h3>
                            <ul>
                                {this.state.categoryList.children.map((item, index) => {
                                    return (
                                        <li key={index}>
                                            <a href="">
                                                <img src={item.picture} alt="" />
                                                <p>{item.name}</p>
                                            </a>
                                        </li>
                                    )
                                })}

                            </ul>
                        </div>
                        {this.state.categoryList.children.map((item, index) => {
                            return (
                                <div className="category_goods" key={index}>
                                    <div className="container">
                                        <div className="head">
                                            <h3>- {item.name} -</h3>
                                            <p>温暖柔软，品质之选</p>
                                            <span className="more">查看全部&gt;</span>
                                        </div>
                                        <ul className="content">
                                            {item.goods.map((i, index) => {
                                                return (
                                                    <li key={index}>
                                                        <img src={i.picture} alt=""/>
                                                        <p>{ i.name }</p>
                                                        <p>{ i.desc }</p>
                                                        <p>￥{ i.price }</p>
                                                    </li>
                                                )
                                            })}

                                        </ul>
                                    </div>
                                </div>
                            )
                        })}

                    </div>
                </div> */}
            </div>
        )
    }
}